<template>
  <div class="table">
    <el-table :data="tableData" style="width: 100%" 
    :header-cell-style="{background:'#545c64',color:'#fff',textAlign:'center'}" :row-style="{ height: '36px'}"
      :cell-style="{ padding: '0px',textAlign:'center'}"
      :header-row-style="{ height: '20px'}">
      <el-table-column label="序号" width="60">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumn"
        :prop="item.prop"
        :key="index"
        :label="item.label"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="modifyRow(scope.$index, tableData)"
            type="text"
            size="small"
            v-if="modifyType"
            >编辑</el-button
          >
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: null,
    },
    tableColumn: {
      type: Array,
      default: null,
    },
    modifyType:{
       type:Boolean,
       default: true,
    }
  },
  methods:{
      modifyRow(index, tableData){
        this.$emit('modifyRow',tableData[index])
      },
      deleteRow(index, tableData){
         this.$emit('deleteRow',tableData[index])
      },
      
  },

  
};
</script>
<style lang="less" scoped>
.table {
  margin: 20px 0;
  border: 1px solid #545c64;
}
</style>